import React from 'react';
import Head from './Head';
import Upload from './upload';
import { Layout, Menu, Breadcrumb } from 'antd';
import './App.css';
import ReactDOM from 'react-dom';
import Sao from './Sao';
import Login from './Login'
import Banlist from './Banlist'
import { message } from 'antd';
import {
  DesktopOutlined,
  FileOutlined,
  LineChartOutlined,
  PictureOutlined,
  AccountBookOutlined,
  FlagOutlined ,
  SnippetsOutlined,
} from '@ant-design/icons';
import UploadPictures from './uploadedPictures';
import User from './User';
import { ReactComponent as MessageSvg } from './2333.svg';
import { ReactComponent as Forge } from './uu.svg';
import Activity from './activity';
import Donate from './Donate';
const { Header, Content, Footer, Sider } = Layout;
class SiderDemo extends React.Component {
  state = {
    collapsed: false, visible: false, setVisible: false
  };
  componentDidMount(){
    ReactDOM.render(
      "主页",
      // <redStone />,,
      document.getElementById('right-main')
    );
  }

  confirm(e) {
    console.log(e);
    message.success('Click on Yes');
  }

  cancel(e) {
    console.log(e);
    message.error('Click on No');
  }

  onCollapse = collapsed => {
    console.log(collapsed);
    this.setState({ collapsed });
  };
  _loadServerInformPage() {
    ReactDOM.render(
      <div>由于实在不知道如何设计，现在主页和介j绍界面还是空的，但是可以登录后上传图片...</div>,
      document.getElementById('right-main')
    );
  }
  _loadServerMoyuPage() {
    ReactDOM.render(
      <Banlist />,
      document.getElementById('right-main')
    );
  }
  _loadServerTAEPage() {
    ReactDOM.render(
      <div>咕咕咕咕咕咕</div>,
      document.getElementById('right-main')
    );
  }
  _loadServerProjectPage() {
    ReactDOM.render(
      <div>咕咕咕咕咕咕</div>,
      document.getElementById('right-main')
    );
  }
  _loadServerPicturesPage() {
    ReactDOM.render(
      <UploadPictures />,
      document.getElementById('right-main')
    );
  }
  _loadUpdatePage() {
    ReactDOM.render(
      <Upload />,
      document.getElementById('right-main')
    );
  }
  _loadActivityPage(){
    ReactDOM.render(
      <Activity />,
      document.getElementById('right-main')
    );
  }
  _loadSaoPage(){
    ReactDOM.render(
      <Sao />,
      document.getElementById('right-main')
    );
  }
  _loadDonatePage(){
    ReactDOM.render(
      <Donate />,
      document.getElementById('right-main')
    );
  }
  getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
         }
         if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
         }
     }
    return "";
}
  checkCookie=()=>{
    if (this.getCookie("token")!="") {
      console.log("登录");
      // ReactDOM.render(<Login />,document.getElementById("login_user"))
      return true;
    }
  else{
    console.log("没");
    return false;
    }
  }
  render() {
    const { collapsed } = this.state;
  this.checkCookie();
    return (
      <Layout>
        <Sider
          style={{
            overflow: 'auto',
            height: '100vh',
            position: 'fixed',
            left: 0,
          }}
        >

          <div className="logo" />

          {this.checkCookie()?<User />:<Login />}
          <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline" >
            <Menu.Item key="1" icon={<DesktopOutlined />} onClick={this._loadServerInformPage}>
              主页
            </Menu.Item>
            <Menu.Item key="3" icon={<Forge width='25px'  margin-top='10px' />} onClick={this._loadServerMoyuPage}>
              模组服-摸鱼世界
            </Menu.Item>
            <Menu.Item key="4" icon={<MessageSvg width='25px'  margin-top='10px' />} onClick={this._loadServerTAEPage}>
              纯净服-TAE
            </Menu.Item>
            <Menu.Item key="5" icon={<LineChartOutlined />} onClick={this._loadServerProjectPage}>
              规划
            </Menu.Item>
            <Menu.Item key="6" icon={<PictureOutlined />} onClick={this._loadServerPicturesPage}>
              服务器截图
            </Menu.Item>
            <Menu.Item key="7" icon={<FileOutlined />} onClick={this._loadUpdatePage}>
              上传截图
            </Menu.Item>
            <Menu.Item key="9" icon={<AccountBookOutlined />} onClick={this._loadDonatePage}>
              赞助感谢名单
            </Menu.Item>
            <Menu.Item key="10" icon={<SnippetsOutlined />} onClick={this._loadSaoPage}>
              骚话（用来传文字也行）
            </Menu.Item>
            {/* <Menu.Item key="1" icon={<FlagOutlined />} onClick={this._loadActivityPage}>
              建筑大赛
            </Menu.Item> */}
          </Menu>
        </Sider>
        <Layout className="site-layout" style={{ marginLeft: 200 }}>
          <Header className="site-layout-background" style={{ padding: 0 }} ><Head /></Header>
          <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>
            <div className="site-layout-background" style={{ padding: 24, textAlign: 'center', minHeight: 800 }} id="right-main">
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>MoyuCraft 2020 Created by 盒子</Footer>
        </Layout>
      </Layout>
    );
  }
}



export default SiderDemo;
